<template>
  <div>
    <!--输入框-->
    <div class="row top">
      <div class="col-md-1 col-lg-1 col-sm-1"></div>
      <div class="col-md-10 col-lg-10 col-sm-10">
        <div class="form-group">
          <input type="text"  class="input-sm" placeholder="输入手机号" >
          <span>&#8195&#8195</span>
          <input type="button" value="查询" class="btn btn-success">
          <span>&#8195&#8195</span>
          <input type="button" value="添加" class="btn btn-primary"data-toggle="modal" data-target="#layer">
        </div>
      </div>
      <div class="col-md-1 col-lg-1 col-sm-1"></div>
    </div>
    <!--表格-->
    <div class="row">
      <div class="col-md-1 col-lg-1 col-sm-1"></div>
      <div class="col-md-10 col-lg-10 col-sm-10">
        <table class="table table-bordered table-hover" >
          <thead>
          <tr  class="text-danger">
            <th class="text-center">短信某某</th>
            <th class="text-center">验证某某</th>
            <th class="text-center">短信记录</th>
          </tr>
          </thead>
          <tbody>
          <tr class="text-center active">
            <td>1</td>
            <td>dgfdgfhgfjhghjghjgfgjghj</td>
            <td>50</td>
          </tr>
          <tr class="text-center success">
            <td>2</td>
            <td>djhdgjgdhjhdjdgghjgdj</td>
            <td>16</td>
          </tr>
          <tr class="text-center info">
            <td>3</td>
            <td>xjhgcccccccccccc</td>
            <td>16</td>
          </tr>
          <tr class="text-center warning">
            <td>4</td>
            <td>f</td>
            <td>16</td>
          </tr>
          <tr class="text-center danger">
            <td>4</td>
            <td>f</td>
            <td>16</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="col-md-1 col-lg-1 col-sm-1"></div>
      <!--分页-->
      <div class="pagination-box text-center">
        <paginate
          :page-count="_self.pages"
          :click-handler="clickCallback"
          :prev-text="'上一页'"
          :next-text="'下一页'"
          :container-class="'pagination'">
        </paginate>
      </div>
    </div>
    <!--模态框 弹出框-->
    <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header top">
            <button type="button" class="close" data-dismiss="modal">
              <span>&times;</span>
            </button>
            <h1 class="modal-title text-center">短信模板</h1>
          </div>
          <div class="form-group text-center">
            <label>&emsp;手机号:</label>
            <input type="text"  class="input-sm"><br>
            <label>&emsp;验证码:</label>
            <input type="text"  class="input-sm"><br>
            <label>短信记录:</label>
            <input type="text"  class="input-sm"><br>
          </div>
          <div class="modal-body text-right">
            <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
            <button data-dismiss="modal" class="btn btn-danger btn-sm">确认
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Paginate from 'vuejs-paginate'
  Vue.component('paginate', Paginate)

  export default {
    name: 'index',
    data () {
      return {
        items: [],
        user: {},
        pages: 0,
        curIndex: 1,
        pageSize: 5,
        isActive: false
      }
    },
    methods: {
      clickCallback: function (pageNum) {
        let _self = this
        _self.curIndex = pageNum
        console.log(pageNum)
      }
    }
  }
</script>
<style></style>
